<template>
    <div class="container">
        <my-header></my-header>
        <el-main>
            <el-card class="main-card" shadow="never">
                <h1>{{pageTitle}}</h1>
                <el-input v-model="title" v-if="action!=='comment'" placeholder="请输入帖子标题"></el-input>
                <el-alert class="tag" type="warning" v-if="action!=='comment'" closable>您的帖子将提交至   <b>{{sectionName}}</b>   版块</el-alert>
                <mavon-editor
                    class="mavonEditor"
                    :toolbars="toolbars"
                    v-model="postContent"
                    @change="change"
                    @save="save"
                    style="min-height: 400px"
                ></mavon-editor>
                <div class="button-container">
                    <el-button type="primary" round @click.native="handlePostClick">发送</el-button>
                    <el-button type="warning" round @click.native="handleClear">清空</el-button>
                </div>
            </el-card>
        </el-main>
    </div>
</template>

<script>
import MyHeader from "../../components/MyHeader"
import axios from 'axios'
import getUrl from "../../assets/js/getPath"
import {mavonEditor} from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import qs from 'qs'

export default {
    name:"Post",
    components:{
        MyHeader:MyHeader,
        mavonEditor:mavonEditor
    },
    data(){
        return{
            action:this.$route.params.action,
            postTitle:this.$route.params.postTitle,
            sectionName:this.$route.params.sectionName,
            sectionId:this.$route.params.sectionId,
            toolbars: {
                bold:        true, // 粗体
                italic:      true, // 斜体
                header:      true, // 标题
                underline:   true, // 下划线
                mark:        true, // 标记
                superscript: true, // 上角标
                quote:       true, // 引用
                ol:          true, // 有序列表
                link:        true, // 链接
                imagelink:   true, // 图片链接
                help:        true, // 帮助
                code:        true, // code
                subfield:    true, // 是否需要分栏
                fullscreen:  true, // 全屏编辑
                readmodel:   true, // 沉浸式阅读
                undo:        true, // 上一步
                trash:       true, // 清空
                save:        true, // 保存（触发events中的save事件）
                navigation:  true // 导航目录
            },
            title:'',
            postContent:'',
            postHtml:''

        }
    },
    mounted(){
        if(localStorage.tempSave){
            this.postContent = window.localStorage.getItem('tempSave');
        }
    },
    computed:{
        pageTitle:function(){
            let action = this.action;
            if(action === 'comment'){
                return "回帖:"+this.postTitle
            }else{
                return "发帖"
            }
        }
    },
    methods:{
        handlePostClick:function(){
            console.log(this.postHtml);
            if(this.action === 'comment'){
                this.handleCommit();
            }else{
                this.handlePost();
            }
        },
        // 提交回帖
        handleCommit:async function(){
            console.log("回帖");
            let url = getUrl('comment');
            let data = {
                'content':this.postHtml,
                'postID':this.$route.params.id
            }
            data = qs.stringify(data);
            console.log(data);
            try{
                const {data:res} = await axios.post(url,data,{ 'Content-Type':'application/x-www-form-urlencoded'});
                if(res.meta.status !== 200){
                    return this.$message.error(res.meta.msg);
                }else{
                    if(res.data.res === 0){
                        this.$message.success("回帖成功！");
                    }else{
                        this.$message.error("您回复的内容中含有违法违规及不符合本论坛版规的内容，请检查后重新操作！");
                    }
                }
            }catch(e){
                this.$message.error("请求出错");
            }
            //this.postData.comments.push(data);
        },
        handleClear:function(){
            this.postContent = '';
        },
        // 提交发帖
        handlePost:async function(){
            if(this.title === ""){
                this.$message.error("标题不能为空");
                return;
            }
            if(this.postHtml === ""){
                this.$message.error("帖子内容不能为空");
                return;
            }
            if(this.postContent.length <= 10){
                this.$message.error("帖子内容不能小于10个字符");
                return;
            }
            let url = getUrl("post");
            let data = {
                'title':this.title,
                'content':this.postHtml,
                'sectionId':this.sectionId
            }
            //data = qs.stringify(data);
            // console.log(data);
            try{
                const {data:res} = await axios.post(url,data,{ 'Content-Type':'application/x-www-form-urlencoded'});
                if(res.meta.status !== 200){
                    return this.$message.error(res.meta.msg);
                }else{
                    if(res.data.res === 0){
                        this.$message.success("发帖成功！");
                    }else{
                        this.$message.error("您发布的内容中含有违法违规及不符合本论坛版规的内容，请检查后重新操作！");
                    }
                }
            }catch(e){
                this.$message.error("请求出错");
            }
        },
        // 所有操作都会被解析重新渲染
        change(value, render){
            // render 为 markdown 解析后的结果[html]
            this.postHtml = render;
            // 实时保存
            window.localStorage.setItem('tempSave',value);
        },
        save(value){
            window.localStorage.setItem('tempSave',value);
        }
    }
}
</script>

<style lang="scss" scoped>
html,body{
    width:100%;
    height: 100%;
}
.container{
    width: 100%;
    background-color: #eee;
}
.main-card{
    width:80%;
    margin: 0 auto;
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
    h1{
        font-size: 30px;
        display: block;
        margin-bottom:20px;
    }
}
.mavonEditor,.tag{
    margin-top:20px;
}
.button-container{
    margin-top:20px;
}
</style>